<template>
  <div class="tools">
    <Header class="head-nft-creator" />
    <div class="revoke">
      <div class="revoke__title">
        <i class="iconfont icon-explorer"></i>
        <span>Explore Decentralized Web</span>
      </div>
      <div class="revoke__summary">
        <span
          >When using dapps like Uniswap or OpenSea you have to grant them
          permission to spend your tokens and NFTs. This is called an allowance.
          If you don't revoke these allowances, the dapp can spend your tokens
          forever. Take back control by revoking your allowances.</span
        >
      </div>
      <div class="revoke__search">
        <SearchBar />
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import ChainList from "@/components/ChainList";
import SearchBar from "./components/SearchBar";

export default {
  components: {
    Header,
    ChainList,
    SearchBar,
  },
  data() {
    return {
      chainCode: "",
    };
  },
  mounted() {},
  methods: {
    select(val) {
      const { chainCode } = val;
      this.chainCode = chainCode;
    },
  },
};
</script>

<style lang="scss" scoped>
.tools {
  position: relative;
  width: 100vw;
  background-color: #14161a;
}

.revoke {
  width: 50vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;

  &__title {
    margin-top: 160px;
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 56px;
    }
    span {
      font-size: 42px;
      font-family: "Roboto Bold";
    }
  }

  &__summary {
    margin: 30px 0 60px;
    span {
      font-size: 16px;
      line-height: 24px;
      color: var(--color-content);
    }
  }

  &__search {
    width: 100%;
    margin: 0 auto 80px;
  }
}
</style>
